<template>
  <div>
    <!--  调拨单列表  -->
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF; height: 55px; width:  100%;"><br>


      <div style="margin-top: -10px;">
        <el-select v-model="filters.wid" placeholder="所有仓库" clearable style="width: 140px">
          <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>

      <div style="margin-top: -32px; margin-left: 155px;">
        <el-tree-select ref="casref" :props="casconfig" v-model="filters.categoryCode" clearable :data="categoryOptions"
          check-strictly :render-after-expand="false" style="width: 140px;" />
      </div>

      <div style="margin-top: -32px; margin-left: 315px;">
        <el-input v-model="filters.names" style="width: 240px" placeholder="请输入商品名称、编号或型号" />
        <el-date-picker v-model="filters.billDate" type="daterange" range-separator="To" start-placeholder="开始时间"
          end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin-left: 15px;" />
        <el-button type="primary" style="margin-left: 15px;" @click="QueryInventoryList()">查询结果</el-button>
      </div>
    </div>
    <div>
      <div
        style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
        <span style="font-size: 12px;margin-left: 20px">数据列表</span>
        <!--工具条-->
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column type="selection" width="55" />
      <el-table-column label="操作" header-align="center" align="center" width="100">
        <template v-slot="{ row }">
          <el-button type="primary" style="margin-left: 16px" size="small">
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="仓库" width="100" header-align="center" align="center" />
      <el-table-column prop="categoryCode" label="商品分类" width="150" header-align="center" align="center" />
      <el-table-column prop="code" label="商品编号" width="150" header-align="center" align="center" />
      <el-table-column prop="goodName" label="商品名称" header-align="center" align="center" />
      <el-table-column prop="attribute" label="属性" width="150" header-align="center" align="center" />
      <el-table-column prop="spec" label="规格型号" width="150" header-align="center" align="center" />
      <el-table-column prop="unit" label="单位" width="100" header-align="center" align="center" />
      <el-table-column prop="stock" label="系统库存" width="150" header-align="center" align="center" />
      <el-table-column prop="innum" label="入库数量" width="150" header-align="center" align="center" />
      <el-table-column prop="outnum" label="出库数量" width="150" header-align="center" align="center" />
    </el-table>

    <div style="margin:40px auto; width: 500px;">
      <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total,sizes,prev, pager, next,jumper" :total="total" />
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getUser } from "@/utils/session";
import { getTree } from "@/api/goods/list";
import { getWarehouseList, inventoryQuery } from "@/api/warehouse/list.jsx";

const warehouse = ref([]);
const categoryOptions = ref([]);

const tableData = ref([])

//条件
const filters = ref({
  names: "",
  wid: "",
  categoryCode: "",
  billDate: "",
  billDate:"",
  eid: getUser().eid

})

//分页参数
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数
/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}
/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}



//配置选项
const casconfig = { value: "code", label: "name" };
const casref = ref(null);


/**
 * 库存列表查询
 */
async function QueryInventoryList() {
  if (filters.value.billDate == null) {
    filters.value.billDate = ""
  }
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    names: filters.value.names,
    begin: filters.value.billDate[0],
    end: filters.value.billDate[1],
    wid: filters.value.wid,
    categoryCode: filters.value.categoryCode,
    eid: filters.value.eid
  }
  let res = await inventoryQuery(data);
  if (res.code == 200) {
    tableData.value = res.data.list
    page.value = res.data.page
    pageSize.value = res.data.pageSize
    total.value = res.data.total
  }
}

/**
 * 查询仓库名称
 */
async function getWarehouse() {
  const res = await getWarehouseList({
    eid: getUser().eid
  });
  if (res.code == 200) {
    warehouse.value = res.data;
  }
}

//企业类目树
async function queryCategory() {
  let res = await getTree();
  if (res.code == 200) {
    categoryOptions.value = res.data
  }

}

onMounted(() => {
  getWarehouse();
  queryCategory();
  QueryInventoryList()
});

</script>

<style lang='scss' scoped>

</style>
